﻿<html>
		<title>用户登陆</title>
		<style type="text/css">
			.main{
				/*设置外边距，下面有30px距离*/
				margin:0px 0px 30px 0px;
				/*背景色*/
				background-color:#ffffff;
				/*字体大小*/
				font-size:12px;
				/*文字颜色*/
				color:#000000;
				/*文本对齐方式*/
				text-align:center;
				/*垂直对齐方式*/
				vertical-align:top;
				/*设置行高*/
				line-height:150%;	
				font-family: Arial, Helvetica, sans-serif;				
			}
			/*设置a标签 字体12px 颜色 #0066FF*/
			a {
				font-size: 12px;
				color: #0066FF; /*#1E33F7*/
			}
			/*设置未访问的超连接无下划线*/
			a:link {
				text-decoration: none;
			}
			/*设置访问后的连接颜色为#0066ff 也无下划线*/
			a:visited {
				text-decoration: none;
				color: #0066FF;
			}
			/*设置鼠标移到超连接上无下划线颜色为#990099*/
			a:hover {
				text-decoration: none;
				color: #990099; /*颜色变换*/
			}
			/*设置选定的超连接无下划线，颜色为#0066ff*/
			a:active {
				text-decoration: none;
				color: #0066FF;
			}
			/*设置所有td标签*/
			td{
				text-align:left;
				vertical-align:top;
				font-size:12px;
			}
			/*设置所有的hr标签*/
			hr{
				/*颜色*/
				color:#cccccc;
				/*高度*/
				height:1px;
				/*上外边距5px*/
				margin-top:5px;
				/*下外边距5px*/
				margin-bottom:5px;
				/*分隔线如果超出框架部分隐藏*/
				overflow:hidden;
			}
			/*设置h1*/
			h1{
				font-size:14px;
				color:#000000;				
				margin-bottom:5px;
				font-weight:bold;
				display:inline;		
				text-align:left;				
			}
			
			#head{
				/*设置head这个div宽度为100%*/
				width:100%;
			}
			.headtab{
				width:100%;
			}
			.headta td{
				/*设置td内边距上10px 右50px 下25px 左135px*/
				padding:10px 50px 25px 135px;
			}
			.inputtxt{
				width:130px;
				height:18px;
				border:1px solid #999999;
			}
			/*注册页面content部分整体设计*/
			#content{
				width:900px;
				height: 50%;
				background-color:#fcfdef;
				border:1px solid #eeeddb;
				margin-right:auto;
				margin-left:auto;
				padding-top: 180px;
			}
			/*设置边框*/			
			.upline{
				border-bottom-width:1px;
				border-bottom-style:dashed;
				border-bottom-color:#b0bec7;
				padding-top:5px;
				padding-bottom:5px;
				margin:20px;
			}
			/*设置文本框样式*/
			.txtinput{
				margin-left:10px;
				font-size:12px;
				width:150px;
				height:18px;
				border:1px solid #a4b4bd;
			}
			/*设置文本域样式*/
			.txtarea{
				margin-left:10px;
				font-size:12px;
				width:350px;
				height:75px;
				border:1px solid #a4b4bd;
			}
			#foot{
				width:100%;
				background-color:#efeedc;
				margin-top:15px;
			}			
		</style>
	</head>
	<body class="main">
		<!--
			head是由一行两列table完成展示 
		-->
		<div id="head">
		<table class="headtab">
			<tr>
				<td align="left">
					<img src="/images/logo.png">
				</td>
				<td style="text-align:right">					
					<img src="/images/cart.gif">
					<a href="/goodscard/queryGoods.do">购物车</a>|
					<a>帮助中心</a>|
					<a>我的帐户</a>|
					<a href="/view/register.html">新用户注册</a>|
				</td>
			</tr>
		</table>
		</div>

<div id="content">			
	<form id="form" action="/user/login.do" method="post">
		<table width="850px" border="0" cellspacing="0">
			<tr>
				<td style="padding:30px;">
					<h1>用户登陆</h1>
					<table width="70%" border="0" cellspacing="2" class="upline">
						<tr>
							<td style="text-align:right;width:20%">账号:</td>
							<td><input type="text" name="loginName" class="txtinput"></td>
							<td>
								<font color="#999999">请输入有效的登陆账号</font>
							</td>
						</tr>
						
						<tr>
							<td style="text-align:right;">密码:</td>
							<td><input type="text" name="pwd" class="txtinput"></td>
							<td><font color="#999999">密码至少六位</font></td>
						</tr>

					</table>
					<table width="70%" border="0" cellspacing="2">
						<tr>
							<td style="text-align:center">
								<input type="image" src="/images/loginbutton.gif">
							</td>									
						</tr>
					</table>
					
				</td>
			</tr>
		</table>
	</form>
</div>
		<!--
			foot是由两行两列的table完成。
			但是第一个td合并了2行
		-->
		<div id="foot">
			<table bgcolor="#efeedc" width="100%" align="center">
				<tr>
					<td rowspan="2" style="width:10%">
						<img src="/images/logo.png" width="195" height="50" style="margin-left:175px;">
					</td>
					<td style="padding-left:50px;padding-top:5px;">
						<a><font color="#747556">CONTACT US</font></a>
					</td>
				</tr>
				<tr>
					
					<td style="padding-left:50px;">
						<font color="#747556">copyright&nbsp;2024&copy;重庆应用职业技术学院</font>
					</td>
				</tr>
				
			</table>
		</div>			
	</body>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script>
$(function(){
	$("input[type=image]").click(function(){
		let $loginName=$("input[name=loginName]");
		if($loginName.val()==''||$loginName.val()==null){
			$loginName.parent().next().html("<font color='#ff0000'>登陆帐号不能为空!</font>");
			return false;
		}
		let $pwd=$("input[name=pwd]");
		if($pwd.val()==''||$pwd.val()==null){
			$pwd.parent().next().html("<font color='#ff0000'>登陆密码不能为空!</font>");
			return false;
		}
		$("#form").submit();
	})
	$("input[name=loginName]").blur(function(){
		if($(this).val()==''||$(this).val()==null){
			$(this).parent().next().html("<font color='#ff0000'>登陆帐号不能为空!</font>");
		}else{
			$(this).parent().next().html("<font color='green'>登陆账号输入正确！</font>");
		}
	})
	$("input[name=pwd]").blur(function(){
		if($(this).val()==''||$(this).val()==null){
			$(this).parent().next().html("<font color='#ff0000'>登录密码不能为空!</font>");
		}else{
			$(this).parent().next().html("<font color='green'>密码输入正确！</font>");
		}
	})
})
</script>
</html>